<template>
  <!-- 我的资料-->
  <div class="mydata">
    <!-- 我的资料 -->
    <el-card class="cardbox" :style="{ marginBottom: '10px' }" shadow="always">
      <span :style="{ fontSize:'20px' }">编辑资料</span>
    </el-card>
    <!-- 里面的内容 -->
    <el-card class="body-box" shadow="always">
      <div class="imgbox">
        <div class="avatar-container">
          <img :src="userInfo.picUrl" :style="{borderRadius:'50%'}" alt="" />
        </div>

      </div>
      <!-- 点击更换 -->
      <p class="avatar-tip">点击更换</p>
      <!-- 下面的列表 -->
      <div>
        <el-form :inline="false" size="normal">
          <el-form-item label="用户名：">
            <el-input></el-input>
          </el-form-item>

        </el-form>
        <!-- 右边 -->
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">Default</span>
            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :size="size" />
          </div>
        </div>
        </div>
    </el-card>
  </div>
</template>
    
<script lang="ts">
import { defineComponent } from 'vue'
// 引入请求
import { getUserInfoRequest } from "@/api/center";
export default defineComponent({
  name: "Data",
})
</script>
<script setup lang="ts">
import { ref, onMounted } from "vue";
// 头像初始值
const userInfo = ref({
  userName: "",
  picUrl: "",
});

onMounted(() => {
  getUserInfo();
});
// 获取用户信息
const getUserInfo = async () => {
  const re = await getUserInfoRequest();
  userInfo.value.picUrl = re.avatar;
};
// 右边日历


const size = ref<'' | 'large' | 'small'>('')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
</script>
    
<style lang='scss' scoped>
.cardbox {
  height: 72px;
  margin-bottom: 10px;
  align-content: center;

}

.body-box {
  margin-bottom: 10px;

  min-height: 700px;
}

.mydata {

  padding-left: 10px;
  margin-top: 10px;
  min-height: 790px;
  width: 1300px;
  margin: 0 auto;
}

//头像
.avatar {
  width: 100px;
  height: 100px;

  img {
    width: 100px;
    height: 100px;
  }
}

.imgbox {
  align-items: center;
  justify-content: center;
  display: flex;
  padding-top: 42px;
}

//点击更换
.avatar-tip {
  color: #7d8090;
  font-size: 14px;
  text-align: center;
  padding: 12px;
  margin: 0;
}

//日历列表
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
</style>
    